<template>
	<div class="mains">
		<div class="is-header"></div>
		<div style="min-height: 500px;background-color: #f0f0f0;color: black;">
			<div class=" flex-r" :class="showMobile?'':'buju'">
				<div v-if="!showMobile" class="" style="width: 245px;min-height: 100px;">
					<div class="is-po" style="background: rgba(0,70,211,1);width: 100%;height: 150px;">
						<div class="p">
							{{title}}
						</div>
						<div class="sub-ico">

						</div>
					</div>
					<div class="flex-c" v-if="tablist.length!=0">
						<div class="card is-cur is-f-14"
							:style="{color:showi==index?'#fff':'',background:showi==index?'rgba(0,70,211,1)':'','border-top':showi==index?'1px solid #fff':'1px solid #f1f1f1'}"
							v-for="(item,index) in tablist" :key="index" @click="ontab(index)">
							{{item.title||item.name}}
						</div>

					</div>

				</div>
				<div class="flex1 flex-r flex-end is-m-b3">
					<div class=""
						style="width: 880px;min-height: 470px;background-color: #fff;border-top:1px solid #f0f0f0;">
						<div v-if="!showMobile" class="flex-r is-f-14 is-box"
							style="height: 55px;border-bottom:1px solid #f0f0f0;line-height: 55px;padding: 0 15px;">
							<div style="width: 130px;">
								<span
									v-if="tablist[showi]?.title||tablist[showi]?.name">{{tablist[showi]?.title||tablist[showi]?.name}}</span>
								<span v-else>{{title}}</span>
							</div>
							<div class="flex1 is-tr" style="color: #999;">
								<span>当前位置：</span>
								<span class="is-cur" @click="onpath(0,0)"> 首页 <span style="color: #333;">
										></span></span>
								<span class="is-cur" @click="onpath(1,0)"> {{title}} <span style="color: #333;"
										v-if="tablist[showi]?.title||tablist[showi]?.name"> ></span></span>
								<span class="is-cur"> {{tablist[showi]?.title||tablist[showi]?.name}}</span>
							</div>
						</div>
						<div v-if="showdel&&showMobile"
							style="width: 100%;min-height: 1px;text-align: center;font-size: 18px;font-weight: 600;padding-top: 20px;">
							{{tablist[showi]?.title||tablist[showi]?.name}}</div>
						<div>
							<transition-group appear name="animate__animated animate__bounce"
								enter-active-class="animate__fadeInUp" leave-active-class="animate__fadeInDown">
								<slot name='title'></slot>
							</transition-group>
							<transition-group appear name="animate__animated animate__bounce"
								enter-active-class="animate__backInUp" leave-active-class="animate__fadeOutDown">
								<slot name='main'></slot>
							</transition-group>

						</div>

					</div>
				</div>
			</div>

		</div>

	</div>
</template>

<script lang="ts" setup>
	import { storeToRefs } from 'pinia'
	import useAppStore from '@/store/modules/home'
	import { isMobile } from '@/utils/index'
	const store = storeToRefs(useAppStore())
	const showdel = store.showdel
	const emit = defineEmits([
		'ontab',
	])
	const {
		showi,
		tablist,
		title,
	} = defineProps({
		title: {
			type: String
		},
		showi: {
			type: Number
		},
		tablist: {
			type: Object
		},
	})
	const onpath = (type : any, i : any) => {

		switch (type) {
			case 0:
				useAppStore().showindexing(i)
				break
			case 1:
				useAppStore().onshowi(0)
				break
		}
		useAppStore().onshowdel(true)
	}

	const ontab = (i : any) => {
		// showi.value = i
		emit('ontab', i)
	}
	const showMobile = ref(null)
	onMounted(() => {
		showMobile.value = isMobile() //true 移动端 false pc
	})
</script>

<style lang="scss" scoped>
	.mains {
		.sub-ico {
			display: block;
			width: 87px;
			height: 91px;
			position: absolute;
			top: 30px;
			left: 33px;
			background: url(@/assets/about/line.png) no-repeat;
		}

		.p {
			position: absolute;
			top: 60px;
			left: 65px;
			color: #fff;
			z-index: 9;
			font-size: 22px;
		}

		.card {
			width: 100%;
			height: 45px;
			line-height: 45px;
			text-indent: 34px;
			// border-top: 1px solid #fff;
			background-color: #fff;
			transition: 600ms;

			&:hover {
				background: rgba(0, 70, 211, 1);
				color: #fff;
			}
		}
	}
</style>